<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>随机点名器</title>
    <style>
        .box {
            width: 600px;
            margin: 20px auto;
            border: 1px solid #ccc;
            padding: 20px;
        }

        .box .header h2 {
            text-align: center;
        }

        .box .header .select {
            font-size: 30px;
            color: red;
        }

        .box .list {
            display: flex;
            flex-wrap: wrap;
            font-size: 20px;
        }

        .box .list .item {
            padding: 4px 8px;
            border: 1px solid #ccc;
            margin: 6px;
            border-radius: 4px;
        }

        .box .list .active {
            background-color: rgb(155, 17, 17);
            color: #ccc;
        }

        button {
            width: 80px;
            height: 30px;
            font-size: 16px;
        }

        input {
            height: 25px;
        }
    </style>
</head>

<body>
    <div>
        <div class="box">
            <div class="header">
                <h2>随机点名器</h2>
                <div>
                    <button id="start">开始</button>
                    <button id="stop">停止</button>
                    <input type="text" value="">
                    <button id="btn">新增</button>
                    <p>恭喜: <span class="select">周志超</span></p>
                </div>
            </div>
            <div class="list">
                <!-- <div class="item">张三1</div>
                <div class="item active">张三2</div> -->
            </div>
        </div>
    </div>
    <script>
        let listEle = document.querySelector(".list");
        let startEle = document.querySelector("#start");
        let stopEle = document.querySelector("#stop");
        let btnEle = document.querySelector('#btn')
        let selectEle = document.querySelector(".select");
        let inputEle = document.querySelector('input')

        function randomInt(min, max) {
            return min + parseInt(Math.random() * (max - min + 1));
        }

        let stus = [
            '张一',
            '张二',
            '张三',
            '张四',
            '张五',
            '张六',
            '张七',
            '张八',
            '张九',
            '张十',
            '王一',
            '王二',
            '王三',
            '王四',
            '王五',
            '王六',
            '王七',
            '王八',
            '王九',
            '王十',
        ];

        // 1. 初始化名字，显示到页面中
        let str = "";
        for (let i = 0; i < stus.length; i++) {
            str += '<div class="item">' + stus[i] + "</div>";
        }
        // 获取到的放入到<div class="list"></div>里面
        listEle.innerHTML = str;
        console.log(listEle);


        // 2.开始点击
        let timer; // 记录时间器变量
        let childrens = listEle.children; // 获取所有的元素的下标
        console.log(childrens);
        let randIndex;  //记录当前随机的索引

        startEle.onclick = function () {

            // 设置按钮禁用
            this.disabled = true;
            this.innerText = '点名中...';

            timer = setInterval(() => {


                // 获取数组stus内的随机值的一个下标
                randIndex = randomInt(0, stus.length - 1);

                // 排他法：所有的都设置为item类名，当前添加active类
                for (let i = 0; i < childrens.length; i++) {
                    childrens[i].className = 'item';
                }
                childrens[randIndex].classList.add('active');

                //显示当前选中的名字
                selectEle.innerHTML = stus[randIndex];
            }, 10)
        }

        //3、停止点击
        stopEle.onclick = function () {
            // 设置按钮可用
            startEle.disabled = false;
            startEle.innerText = '开始';
            // 清除定时器
            clearInterval(timer);
            // 重新设置定时器
            timer = null;
        };
        // 4、新增
        btnEle.onclick = function () {
            let divEle = document.createElement('div');
            divEle.className = 'item';
            console.log(divEle);
            divEle.innerText = inputEle.value;
            let nesbtnEle = listEle.appendChild(divEle);
        };

    </script>
</body>

</html>